<template>
  <a-modal
    title="新增相册"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="上传图片："
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <div class="clearfix">
            <div v-if="ImageList.length">
              <div
                class="img-border-div"
                v-for="(item, index) in ImageList"
                :key="index"
              >
                <img
                  class="u-img"
                  :src="item.src"
                  alt="img"
                >
                <div class="img-b-div">
                  <a-icon
                    class="eye-a"
                    type="eye"
                    @click="handlePreview(item)"
                  />
                  <a-icon
                    class="delete-a"
                    type="delete"
                    @click="deleteImg(index)"
                  />
                </div>
              </div>
            </div>
            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :before-upload="beforeUpload"
            >
              <div v-if="ImageList.length < 9">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
            <a-modal
              :visible="previewVisible"
              :footer="null"
              @cancel="handlePreviewCancel"
            >
              <img
                alt="example"
                style="width: 100%"
                :src="previewImage"
              >
            </a-modal>
          </div>
        </a-form-item>

        
        <!-- <a-form-item
          label="添加描述："
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea
            v-decorator="['Content', {rules: [{required: true, message: '请填写描述内容'}]}]"
            class="dongtai-textarea"
            placeholder="请填写描述"
            :autoSize="{minRows: 2, maxRows: 5}"
          />
        </a-form-item> -->
        <a-form-item
          label="添加标签："
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <div>
            <div>
              <a-checkable-tag 
                v-for="(item, index) in checkTags" 
                :key="index" 
                v-model:checked="item.isChecked" 
                @change="handleChange">{{item.label}}</a-checkable-tag>
            </div>
          </div>
        </a-form-item>
        <a-form-item
          label="发布对象："
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-radio-group v-decorator="['duixiang', {rules: [{required: false, message: '请选择发布对象！'}]}]" @change="changeRadio">
            <a-radio :value="1">全园</a-radio>
            <a-radio :value="2">班级</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="发送班级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          v-if="form.getFieldValue('duixiang')  ===2"
        >
        
          <a-select
            mode="multiple"
            allowClear
            placeholder="请至少选择一个班级！"
            v-decorator="['ClassIdList', {rules: [{required: true, message: '请至少选择一个班级！'}]}]"
          >
            <a-select-option
              v-for="item in classList"
              :key="item.classId"
              :value="item.classId"
            >{{ item.className }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
  import { sysPosAdd } from '@/api/modular/garden/classManage'
import { getMyAuthClassList } from '@/api/modular/garden/classDynamicApi';
  import moment from 'moment';
  export default {
    props: {
      
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        previewVisible: false,
        previewImage: '',
        ImageList: [],
        checkTags: [
          {
            label: "活泼可爱",
            isChecked: false,
          },{
            label: "宝贝棒棒哒",
            isChecked: false,
          },{
            label: "创意手工",
            isChecked: false,
          },{
            label: "趣味游戏",
            isChecked: false,
          },{
            label: "课堂活动",
            isChecked: false,
          },{
            label: "今日美味",
            isChecked: false,
          },{
            label: "酷萌宝贝",
            isChecked: false,
          },{
            label: "宝贝作品",
            isChecked: false,
          },{
            label: "我们毕业啦",
            isChecked: false,
          },{
            label: "安全教育",
            isChecked: false,
          },{
            label: "儿童健康",
            isChecked: false,
          },{
            label: "家长学堂",
            isChecked: false,
          },{
            label: "习惯养成",
            isChecked: false,
          },{
            label: "性格培养",
            isChecked: false,
          },{
            label: "管教方式",
            isChecked: false,
          },{
            label: "启蒙教育",
            isChecked: false,
          },{
            label: "今日故事",
            isChecked: false,
          },{
            label: "今日推荐",
            isChecked: false,
          },{
            label: "节日热点",
            isChecked: false,
          },{
            label: "分离焦虑",
            isChecked: false,
          },{
            label: "开学准备",
            isChecked: false,
          },{
            label: "妙语趣事",
            isChecked: false,
          },],
          isShowBanjiList: false,
        classList: [],
      }
    },
    mounted(){
      this.getMyAuthClassList()
    },
    methods: {
      getMyAuthClassList(){
        getMyAuthClassList().then((res) => {
          console.log(res.data)
          this.classList = res.data;
        })
      },
      // 初始化方法
      add (record) {
        this.visible = true;
        
        this.$nextTick(() => {
          this.form.setFieldsValue(
              {
                duixiang: 1,
              }
          )
        })
        
      },

      async beforeUpload(file, fileList){
            let src = await this.fileToBase64(file);
            file.src = src;
            // this.ImageList = [...this.ImageList, file];
            this.ImageList.push(file)
            // this.ImageList = fileList;
            return false;
        },
        fileToBase64(file){  
            return new Promise((resolve, reject) => {
                let reader = new FileReader();  
                reader.readAsDataURL(file);  
                reader.onload = function (e) {    
                    resolve(e.target.result)
                }
            })
            
        },
        handlePreviewCancel() {
          this.previewVisible = false;
        },
        async handlePreview(file) {
          if (!file.src && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
          }
          this.previewImage = file.src || file.preview;
          this.previewVisible = true;
        },
      
        deleteImg(index){
          this.ImageList.splice(index, 1)
        },      
      handleChange(val){
        console.log(val)
        console.log(this.checkTags)
      },
      changeRadio(e){
        if(e.target.value == 2){
          this.isShowBanjiList = true;
        }else{

          this.isShowBanjiList = false;
        }
        
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        let checkedArr = this.checkTags.filter(item => {return item.isChecked})
        validateFields((errors, values) => {
          if (!errors) {
            var _form = new FormData();
            _form.append('Content', values.Content)
            // _form.append('ClassIdList', JSON.stringify(values.ClassIdList))
            
            _form.append('tags', checkedArr.join(','))
            _form.append('duixiang', values.duixiang)
            values.ClassIdList.forEach(item => {
              _form.append('ClassIdList', item)
            })
            this.ImageList.forEach(item => {
              _form.append('ImageList', item)
            })
            sysPosAdd(values).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
<style  lang="less" scoped>
  .img-b-div{
      display: none;
    }
    .img-border-div{
      float: left;
      width: 104px;
      height: 104px;
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;
      border: 1px solid #dddddd;
      &:hover{
        .img-b-div{
          display: block;
          background-color: rgba(0,0,0,0.5);
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
        }
      }
    }.eye-a{
      position: absolute;
      left: 25px;
      top: 45%;
      color: #ffffff;
      cursor: pointer;
      &:hover{
        font-size: 16px;
      }
    }
    .delete-a{
      position: absolute;
      left: 60px;
      top: 45%;
      color: #ffffff;
      cursor: pointer;
      &:hover{
        font-size: 16px;
        color: #ff0000;
      }
    }
    .u-img{
      display: inline-block;
      height: 100%;
      width: 100%;
    }
</style>
